<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
<style>
*{
margin:0px;
padding:0px;
}
body{
background:#efefef;
}
.top{
display:flex;
background:#56AB6D;
width:96%;
height:120px;
border-radius:15px;
margin-left:2%;
margin-right:2%;
margin-top:2px;

}
.tab1{
padding:30px 60px;
width:50%;
font-size:15px;
text-align:center;
}
.tab11{
padding:28px 60px;
width:50%;
font-size:15px;
text-align:center;
}
.txt1{
color:white;
text-align:center;
margin-top:5px;
}
.txt11{
color:white;
text-align:center;

}
.txt2{
color:#ccc;
text-align:center;
margin-top:3px;
font-size:10px;
}


.b1{
padding-top:10px;
background:white;
width:96%;
height:142px;
border-radius:15px;
margin:2% auto 2%;
}
.b2{
padding-top:10px;
background:white;
width:96%;
height:230px;
border-radius:15px;
margin:2% auto 2%;
}
.b3{
padding-top:10px;
background:white;
width:96%;
height:305px;
border-radius:15px;
margin:2% auto 2%;
}
.x1{
display:flex;
padding-top:30px;
}

.tab2{

width:25%;

text-align:center;
}
.txt3{
margin-top:10px;
font-size:13px;
}
.txt4{
text-align:center;
font-size:1px;
color:red;
}
.tab3{
padding-left:10px;
width:100%;
height:15px;
font-size:1px;
color:#AAA;
margin-top:5px;

}


.top2{
        display:flex;
        justify-content:space-between;
        align-items: center;
        background:#efefef;
        padding:10px;
        position:fixed;
		width:96%;
}

.top22{
        display:flex;
        justify-content:space-between;
        align-items: center;
        background:#efefef;
        padding:10px;

}



</style>

<div class="all">
   
    <div class="top2">
		
        <div>
			<a href="index.html">
            <img src="右.png" width="20" />
			</a>
        </div>
        <div>支付</div>
        <img src="省略号.png" width="20" />
    </div>
	    <div class="top22">
        <div>
            <img src="右.png" width="20" />
        </div>
        <div>支付</div>
        <img src="省略号.png" width="20" />
    </div>
    
    <div  class="top">
            <div class="tab1">
                <div class="t1"><img src="收付款.png" width="28" />
				</div>
                <div class="txt1">收付款</div>
            </div>
            <div class="tab11">
               <div class="t1"> <img src="钱包.png" width="30" height="28"/>
			   </div>
                <div class="txt11">钱包</div>
				<div class="txt2">￥9999.99</div>
            </div>
	</div>
	
	<div  class="b1">
	     <div class="tab3">金融理财</div>
	     <div class="x1">
            <div class="tab2">
                <img src="信用卡还款.png" width="28" height="30"/>
                <div class="txt3">信用卡还款</div>
            </div>
            <div class="tab2">
                <img src="理财通.png" width="30" height="30"/>
                <div class="txt3">理财通</div>

            </div>
            <div class="tab2">
            </div>
			<div class="tab2">
            </div>
			</div>
	</div>
	
	<div  class="b2">
	     <div class="tab3">生活服务</div>
	     <div class="x1">
            <div class="tab2">
                <img src="手机充值.png" width="28" height="30"/>
                <div class="txt3">手机充值</div>
            </div>
            <div class="tab2">
                <img src="生活缴费.png" width="30" height="30"/>
                <div class="txt3">生活缴费</div>
            </div>
            <div class="tab2">
                <img src="Q币充值.png" width="30" height="30"/>
                <div class="txt3">Q币充值</div>
            </div>
            <div class="tab2">
                <img src="城市服务.png" width="30" height="30"/>
                <div class="txt3">城市服务</div>
            </div>			
		</div>
	     <div class="x1">
            <div class="tab2">
                <img src="腾讯公益.png" width="28" height="30"/>
                <div class="txt3">腾讯公益</div>
            </div>
            <div class="tab2">
                <img src="医疗健康.png" width="30" height="30"/>
                <div class="txt3">医疗健康</div>
            </div>
            <div class="tab2">
                <img src="健康码.png" width="30" height="30"/>
                <div class="txt3">防疫健康码</div>
				<div class="txt4">限时推广</div>
            </div>		
		</div>		
	</div>
	
	<div  class="b1">
	     <div class="tab3">交通出行</div>
	     <div class="x1">
            <div class="tab2">
                <img src="右上箭头.png" width="28" height="30"/>
                <div class="txt3">出行服务</div>
            </div>
            <div class="tab2">
                <img src="火车票机票.png" width="30" height="30"/>
                <div class="txt3">火车票机票</div>
            </div>
			<div class="tab2">
                <img src="滴滴出行.png" width="30" height="30"/>
                <div class="txt3">滴滴出行</div>
            </div>
			<div class="tab2">
                <img src="酒店.png" width="30" height="30"/>
                <div class="txt3">酒店</div>
            </div>
		</div>
	</div>
	
	
	<div  class="b3">
	     <div class="tab3">购物消费</div>
	     <div class="x1">
            <div class="tab2">
                <img src="京东.png" width="28" height="30"/>
                <div class="txt3">京东</div>
            </div>
            <div class="tab2">
                <img src="美团外卖.png" width="30" height="30"/>
                <div class="txt3">美团外卖</div>
            </div>
			<div class="tab2">
                <img src="电影演出赛事.png" width="30" height="30"/>
                <div class="txt3">电影演出赛事</div>
            </div>
			<div class="tab2">
                <img src="美团团购.png" width="30" height="30"/>
                <div class="txt3">美团团购</div>
            </div>
		</div>
	     <div class="x1">
            <div class="tab2">
                <img src="拼多多.png" width="28" height="30"/>
                <div class="txt3">拼多多</div>
            </div>
            <div class="tab2">
                <img src="蘑菇街.png" width="30" height="30"/>
                <div class="txt3">蘑菇街女装</div>
            </div>
			<div class="tab2">
                <img src="唯品会.png" width="30" height="30"/>
                <div class="txt3">唯品会特卖</div>
            </div>
			<div class="tab2">
                <img src="猪.png" width="30" height="30"/>
                <div class="txt3">转转二手</div>
            </div>
		</div>
	     <div class="x1">
            <div class="tab2">
                <img src="贝壳.png" width="28" height="30"/>
                <div class="txt3">贝壳找房</div>
            </div>

		</div>		
	</div>
</div>



